<template>
    <div class="flex flex-col text-base fixed left-0 top-0 w-screen h-screen z-20 bg-[#242424] text-zinc-100">
        <Header v-model:activeIndex="activeIndex" />
        <Detail class="flex-1" :ISBN="ISBN" v-if="activeIndex === 1" />
        <!-- <Review class="flex-1" :ISBN="ISBN" v-if="activeIndex === 2" /> -->
        <div v-if="activeIndex === 2" class="mt-1">
            <div class="flex flex-col gap-1">
                <div class="flex gap-4 items-center w-full  justify-center">
                    <div>全部</div>
                    <div>最新</div>
                    <div>图/视频</div>
                </div>
                <div class="flex gap-4 items-center w-full  justify-center">
                    <div>好评({{ goodEvalNum }})</div>
                    <div>中评({{ mediumEvalNum }})</div>
                    <div>差评({{ negativeEvalNum }})</div>
                </div>
            </div>
            <div class="h-screen  overflow-auto">
                <div class="flex gap-2 items-center  font-medium p-2"
                    v-for="(item, index) in storeRef.getEvalRplLst.value" :key="index">
                    <div class="border w-5 h-5  rounded-xl flex justify-center items-center"
                        :class="getUserLogo(item).color">{{ getUserLogo(item).name
                        }}</div>
                    <div class="flex-1 flex flex-col gap-1">
                        <span>@{{ item.evaluator }}</span>
                        <span class="ml-1">{{ item.content }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import Detail from './detail.vue'
import Review from './Review.vue'
import Header from './header.vue'
import { ref, provide, computed } from 'vue'
import { EvaluateClass } from '../service';
import evaluateAPI from '@/api/evaluate'
const props = defineProps<{
    ISBN: string,
}>()

const activeIndex = ref(2)


const { searchEvalRplLst, storeRef, store, goodEvalNum, mediumEvalNum, negativeEvalNum } = EvaluateClass

const init = async () => {
    await searchEvalRplLst(props.ISBN)
}

const getUserLogo = (item: any) => {
    const colors = [
        'bg-[#000000]',
        'bg-[#413C26]',
        'bg-[#337AFF]',
        'bg-[#282828]',
        'bg-[#33F6FF]'
    ];

    function getRandomColor() {
        const randomIndex = Math.floor(Math.random() * colors.length);
        return colors[randomIndex];
    }
    const name = item.evaluator.substring(0, 1)
    return {
        name,
        color: getRandomColor()
    }
}

init()


</script>